<template>
  <div class="app-container home">
    <div>
      <el-form
        :model="queryParams"
        ref="queryForm"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="设备名称" class="small-label" prop="equipmentName">
          <el-input
            v-model="queryParams.equipmentName"
            placeholder="请输入设备名称"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="设备状态" prop="equipmentType">
          <el-select
            v-model="queryParams.equipmentType"
            placeholder="请选择设备状态"
            clearable
            size="small"
          >
            <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
          <el-button icon="el-icon-thumb" size="mini" @click="run">{{
            scorllList.length > 0 ? "停止滚动模式" : "开启滚动模式"
          }}</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="display-flex flex-wrap" style="width: 100%">
      <vue-seamless-scroll
        :data="scorllList"
        class=""
        :style="{
          height: bodyHeight + 'px',
          overflow: scorllList.length > 0 ? 'hidden' : 'auto',
          width: '100%',
        }"
      >
        <ul
          class="list display-flex flex-wrap"
          style="width: 100%; padding: 20px"
          ref="indexBox"
          infinite-scroll-disabled="disabled"
          infinite-scroll-distance="20"
        >
          <li
            v-for="(item, i) in list"
            class="list-item"
            :key="i"
            style="width: 48%; margin-right: 2%"
          >
            <equipment
              :item="item"
              :statusOptions="statusOptions"
              @task="openTask"
              :alarmTypeOptions="alarmTypeOptions"
              :alarmStatusOptions="alarmStatusOptions"
              :clientWidth="clientWidth"
              :remaining="item.remaining"
            />
          </li>
          <div
            class="no-data"
            v-show="scorllList.length == 0 && list.length == 0"
          >
            <el-image style="width: 300px" :src="noData" fit="cover"></el-image>
            <div>暂无数据</div>
          </div>
        </ul>
        <!-- <p v-if="loading" class="text-center">加载中...</p>
        <p v-if="noMore && queryParams.pageNum > 1" class="text-center">
          没有更多了
        </p> -->
      </vue-seamless-scroll>
      <el-dialog
        :close-on-click-modal="false"
        :title="title"
        :visible.sync="open"
        width="900px"
        append-to-body
      >
        <task-distribution :id="id" />
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getEquipmentOptionsAllIndex } from "@/api/equipment/info";
import Equipment from "./components/index/ParamEquipment.vue";
import TaskDistribution from "./components/index/TaskDistribution.vue";
import socket from "../websocketMixins";
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
  name: "index",
  mixins: [socket],
  components: { Equipment, TaskDistribution, vueSeamlessScroll },
  data() {
    return {
      queryParams: {
        equipmentName: "",
        materialAddMethodId: "",
        equipmentType: "",
        // pageNum: 1,
        status: 1,
        // pageSize: 6,
      },
      scorllList: [],
      noData: require("@/assets/404_images/no-data.png"),
      open: false,
      title: "任务下发",
      // technologyMaterialAddMethodOptions: [], //增材方式option
      loading: false,
      statusOptions: [],
      list: [],
      total: 0,
      id: null,
      clientWidth: 1440,
      bodyHeight: 500,
      alarmTypeOptions: [], //报警类型
      alarmStatusOptions: [], //报警状态
    };
  },
  created() {
    // 设备状态
    this.getDicts("equipment_info_status").then((response) => {
      this.statusOptions = response.data;
    });
    //  报警类型
    this.getDicts("equipment_alarm_type").then((response) => {
      this.alarmTypeOptions = response.data;
    });
    // 报警状态
    this.getDicts("equipment_alarm_status").then((response) => {
      this.alarmStatusOptions = response.data;
    });
    // // 增材方式
    // this.getDicts("base_material_addMethod").then((response) => {
    //   this.technologyMaterialAddMethodOptions = response.data;
    // });
    // this.getList();
    // this.initWebSocket();
    // 名称过长，适配小屏
    this.clientWidth = document.documentElement.clientWidth;
    this.bodyHeight = document.body.scrollHeight - 160;
  },
  computed: {
    noMore() {
      return this.list.length >= this.total;
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
  mounted() {

  },
  methods: {
    run() {
      if (this.scorllList.length == 0) {
        this.scorllList = this.list;
      } else {
        this.scorllList = [];
      }
    },
    websocketonmessage(msg) {
      //数据接收
      let obj = msg.data;
      console.info("msg============", obj);
      if (obj.indexOf("room") !== -1) {
        let res = JSON.parse(obj);
        this.setItemData(this.list, res, "equipment");
      }
      this.reset();
    },
    //  socket测试
    openTask(id) {
      this.open = true;
      this.id = id;
    },

    toPercent(point) {
      var str = Number(point * 100).toFixed(2);
      // str+="%";
      return str;
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      if(this.scorllList.length!==0){
        this.scorllList = [];
        this.$message("已自动停止滚动模式");
      }
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    removePropertyOfNull(obj) {
      Object.keys(obj).forEach((item) => {
        if (obj[item] == "") delete obj[item];
      });
      return obj;
    },
    load() {
      this.loading = true;
      this.getList(++this.queryParams.pageNum);
    },
    /** 查询设备信息列表 */
    getList() {
      let obj = this.removePropertyOfNull(this.queryParams);
      getEquipmentOptionsAllIndex(obj).then((response) => {
        this.loading = false;
        // this.list.concant(response.rows);

        this.list = response.data;

        this.list.forEach((item) => {
          item.productionStatus = this.toPercent(item.productionStatus);
          // 处理正在打印中的图片，图片为BASE64
          if(item.imageUrl&&item.imageUrl.substr(0,4).toLowerCase() !== "http"){
            item.imageUrl='data:image/png;base64,'+item.imageUrl
          }

        });
        this.total = response.total;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
  .no-data {
    text-align: center;
    color: #aaa;
    margin: 0 auto;
  }
}
</style>

